<template>
  <div id="douban-page">


   <div class="radio-group" v-if="showTags">
    <el-radio-group v-model="radio1">
      <template v-for="(item,index) in tags" >
         <el-radio-button :key="index" :label="item" ></el-radio-button>
      </template>
    </el-radio-group>
  </div>
   
   <!-- <div class="content-box">
    <template v-for="(item,index) in movieInfo">  <div class="info-card" :key="index">
      <div class="cover">
        <img :src="item.cover" width="115">
      </div>
      <div class="detail">
          <img v-if="item.is_new" src="https://img3.doubanio.com/f/movie/caa8f80abecee1fc6f9d31924cef8dd9a24c7227/pics/movie/ic_new.png" width="16">
        <span class="title" >{{item.title}}</span>
         <span class="rate">{{item.rate}}</span>

      </div>
     
    </div>
    </template>
 
    
   </div> -->
  <div class="wrap" style="overflow:scroll;height:600px;overflow-x:hidden">
<ul class="content-box"  >
      <template v-for="(item,index) in movieInfo">  <div class="info-card" :key="index">
      <div class="cover" @click="onlinePlay(item.title)">
        <img :src="item.cover" width="115">
      </div>
      <div class="detail">
          <img v-if="item.is_new"  src="https://img3.doubanio.com/f/movie/caa8f80abecee1fc6f9d31924cef8dd9a24c7227/pics/movie/ic_new.png" width="16">
        <a :href="item.url" target="_blank" style="text-decoration:none;"><span class="title" >{{item.title}}</span></a>
         <span class="rate">{{item.rate}}</span>

      </div>
     
    </div>
    </template>
    </ul>
  </div>
    
  
  

  <div class="empty-box">
    <div class="load-button" @click="load"><span class="el-icon-arrow-down" ></span></div>
  </div>
  </div>
</template>
<script>

export default {
  name:'douBanPage',
 
  data(){
    return{
      
      list:[
        {picUrl:"/assets"},
      ],
       radio1:'热门',
       showTags:true,
       tags:["热门","最新","经典","可播放","豆瓣高分","冷门佳片","华语","欧美","韩国","日本","动作","喜剧","爱情","科幻","悬疑","恐怖","成长"],
       movieInfo:[],
       page_start:0,
       type:'',
       whichList:'movieList'//tvList
    }
  },
  methods:{
     load(){
   this.$axios.get('/api/tvInfo/'+this.whichList,{params:{type:this.radio1,page_start:this.page_start}}).then(res=>{
   for(let i=0;i<res.data.length;i++){
     let t='https://images.weserv.nl/?url='+res.data[i].cover
     res.data[i].cover=t
   }
   this.movieInfo=[...this.movieInfo,...res.data];
   console.log(this.page_start)
   this.page_start+=24;
   })
  },
  init(){
         this.$axios.get('/api/tvInfo/'+this.whichList,{params:{type:this.radio1,page_start:this.page_start}}).then(res=>{
   for(let i=0;i<res.data.length;i++){
     let t='https://images.weserv.nl/?url='+res.data[i].cover
     res.data[i].cover=t
   }
   this.movieInfo=[...res.data];
   console.log(this.page_start)
   this.page_start+=24;
   })
  },
  onlinePlay(title){
     console.log('xxxx')
    this.$store.commit('search',title)
    console.log(this.$store.state.searchTitle)
    this.$router.push('/video')
  }
  }
  ,
  mounted(){
    var type=window.location.href.split('=')[1]
    this.type=type
     switch(type){
      case 'movie':
      this.showTags=true
      this.whichList='movieList'
       this.tags=["热门","最新","经典","可播放","豆瓣高分","冷门佳片","华语","欧美","韩国","日本","动作","喜剧","爱情","科幻","悬疑","恐怖","成长"]  
       this.radio1='热门'
      this.init()
      break;
      case 'tv':
      this.showTags=true
      this.tags=["热门","美剧","英剧","韩剧","日剧","国产剧","港剧","日本动画","综艺","纪录片"] 
      this.whichList='tvList'
       this.radio1='热门'
       this.init()
      break;
      case 'serial':
        this.showTags=false
        this.tags=["热门","美剧","英剧","韩剧","日剧","国产剧","港剧","日本动画","综艺","纪录片"]   
        this.whichList='tvList'
        this.radio1='美剧'
        this.init()
      break;
      case 'cartoon':
         this.showTags=false
         this.tags=["热门","美剧","英剧","韩剧","日剧","国产剧","港剧","日本动画","综艺","纪录片"]   
         this.whichList='tvList'
          this.radio1='日本动画'
          this.init()
      break;
      default:
      break;

    }
    
   
  },
  watch:{
    radio1(){
      console.log(this.radio1)
      this.page_start=0;
      this.$axios.get('/api/tvInfo/'+this.whichList,{params:{type:this.radio1,page_start:this.page_start}}).then(res=>{console.log(res)
      for(let i=0;i<res.data.length;i++){
        let t='https://images.weserv.nl/?url='+res.data[i].cover
        res.data[i].cover=t
      }
    this.movieInfo=res.data
      this.page_start+=24;
   })
    },
    $route(){
      var type=window.location.href.split('=')[1]
      this.type=type

       switch(type){
      case 'movie':
      this.showTags=true
      this.whichList='movieList'
       this.tags=["热门","最新","经典","可播放","豆瓣高分","冷门佳片","华语","欧美","韩国","日本","动作","喜剧","爱情","科幻","悬疑","恐怖","成长"]  
       this.radio1='热门'
      this.init()
      break;
      case 'tv':
      this.showTags=true
      this.tags=["热门","美剧","英剧","韩剧","日剧","国产剧","港剧","日本动画","综艺","纪录片"] 
       this.whichList='tvList'
       this.radio1='热门'
       this.init()
      break;
      case 'serial':
        this.showTags=false
        this.tags=["热门","美剧","英剧","韩剧","日剧","国产剧","港剧","日本动画","综艺","纪录片"]   
        this.whichList='tvList'
        this.radio1='美剧'
      break;
      case 'cartoon':
         this.showTags=false
         this.tags=["热门","美剧","英剧","韩剧","日剧","国产剧","港剧","日本动画","综艺","纪录片"]   
         this.whichList='tvList'
          this.radio1='日本动画'
      break;
      default:
      break;

    }
    }
  }
}
</script>
<style lang="scss" scoped>
.load-button{
  width: 25px;
  height: 25px;
  border-radius: 50%;
  border: 1px solid #92b9c5;
   background-color: rgb(101, 169, 222);
   span{
     color: #ffffff;
     position: relative;
     top: 2px;
     
   }
   &:hover{background-color: rgb(133, 200, 251);} 
}

#douban-page{
  height: 100vh;
  color: black;
  margin: 0 auto;
  overflow: hidden;
}
.empty-box{
  margin-top:5px;
  height: 100px;
  text-align: center;
  display: flex;
  justify-content: center;
  
}
.info-card{
  width:115px;
  margin-right: 20px;
  margin-bottom: 20px;
}
.detail{
  margin-top:3px ;
  text-align: center;
   width:115px;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  text-overflow:ellipsis;
  .title{
    color: #37a;
    font-size:13px;
    margin-right:10px;
    text-align: center;
    cursor: pointer;
    
   
  }
  .rate{
    color: #e09015;;
    font-size: 13px;
  }
  img{
    margin-right: 10px;
    position: relative;
    bottom: -2px;
  }
}

.content-box{
  margin: 20px 5vw 20px 5vw;
  display: flex;
  flex-wrap: wrap;
  scrollbar-width: none;
  
}
.cover{
  width: 115px;
  height: 161px;
  overflow: hidden;
  cursor: pointer;
}

</style>